ImGui

前面幾天介紹OpenGL的時候，也許會發現裡面有個像是能調參數的GUI，像這樣。

那這東西到底是甚麼呢? 今天就來介紹一下

ImGui 介紹

ImGui(immediate mode gui)是個統稱。這類的UI特點是沒有UI狀態的，與一般的 Retained mode。比如要寫上一個字串，只需要 ui.label("Some Text")即可，不需要用到 UI 組件，減少元件增加時，個個元件間相互影響的複雜度上升。

簡單來說，優點就是快且簡單，因為沒有 UI 狀態維護所以使用起來很容易上手，不過缺點就是由於每次畫面所有元件都要重畫，所以效能會比 Retain mode 差。

Dear Imgui

我所使用的是 Dear ImGui，Dear Imgui 是個輕量、快速的 imtermediate GUI 讓開發者可以非常快速的建立 GUI，被遊戲開發(gamedev)、編輯器(editor)、除錯器(debugger)開發者等使用。

Dear imgui 安裝 - 使用 imgui-SFML

imgui-SFML

因為我是使用了 SFML 來開發嗎，所以就使用了由這位大大所維護的 imgui-sfml，且我的專案是採用 Cmake，imgui-SFML 提供了 Cmake 支援，所以可以很好的整合道專案裏頭。

find_package(ImGui-SFML REQUIRED)
target_link_libraries(my_target PRIVATE ImGui-SFML::ImGui-SFML)

Setup

將 imgui-SFML clone 下來之後進入到 imgui-sfml/

建立目錄 build/ 之後下 cmake 指令(使用msys2 作為 windows下編譯環境)

mkdir build && cd build
cmake -G "MSYS Makefiles" -DIMGUI_DIR=`pwd`/../../imgui -DBUILD_SHARED_LIBS=OFF -DIMGUI_SFML_BUILD_EXAMPLES=OFF -DCMAKE_INSTALL_PREFIX:PATH=/mingw32 ..
make -j6
make install

簡單例子

我們只需要將 imgui include即可開始使用。

#include "imgui.h"
#include "imgui-SFML.h"

#include <SFML/Graphics/RenderWindow.hpp>
#include <SFML/System/Clock.hpp>
#include <SFML/Window/Event.hpp>

int main()
{
    sf::RenderWindow window(sf::VideoMode(1280, 720), "");
    window.setVerticalSyncEnabled(true);
    ImGui::SFML::Init(window);

    sf::Color bgColor;

    float color[3] = { 0.f, 0.f, 0.f };

    std::string windowTitle = "ImGui + SFML = <3";

    window.setTitle(windowTitle);
    window.resetGLStates(); // call it if you only draw ImGui. Otherwise not needed.
    sf::Clock deltaClock;
    while (window.isOpen()) {
        sf::Event event;
        while (window.pollEvent(event)) {
            ImGui::SFML::ProcessEvent(event);

            if (event.type == sf::Event::Closed) {
                window.close();
            }
        }

        ImGui::SFML::Update(window, deltaClock.restart());

        // begin window
        ImGui::Begin("Sample window");
        // Background color edit
        if (ImGui::ColorEdit3("Background color", color)) {

            bgColor.r = static_cast<sf::Uint8>(color[0] * 255.f);
            bgColor.g = static_cast<sf::Uint8>(color[1] * 255.f);
            bgColor.b = static_cast<sf::Uint8>(color[2] * 255.f);
        }

        ImGui::End(); // end window

        window.clear(bgColor); // fill background with color
        ImGui::SFML::Render(window);
        window.display();
    }

    ImGui::SFML::Shutdown();
}

結果: